window.addEventListener("load", () => {
  /* 重庆旅游网动画时间线 */
  let chongqing = gsap.timeline();
  chongqing
    .to(["#chong", "#qing", "#lv", "#you","#wang"], {
      opacity: 1,
      y: 0,
      x:0,
      duration: 1,
    })
    .to(".mask", {
      y: "-100vh",
      delay:1,
      onComplete: () => {
        document.body.style.height = "auto";
        document.body.style.overflow = "auto";
        document.querySelector(".mask").remove();
        let width = window.innerWidth;
        if (width >= 375 && width <= 767.5) {
          /* 开始新的时间线动画 */
          let tl = gsap.timeline();
          tl.to(".text-list", {
            opacity: 1,
            stagger: 0.1,
            y: 0,
          });
        } else {
          chongqing.to(".nav", {
            opacity: 1,
            x: 0,
            duration: 0.5,
            onComplete: () => {
              /* 开始新的时间线动画 */
              let tl = gsap.timeline();
              tl.to(".text-list", {
                opacity: 1,
                stagger: 0.1,
                y: 0,
              });
            },
          });
        }
      },
    });

  document.querySelector(".skip").addEventListener("click", () => {
    chongqing.kill();
    let quitChongqing = gsap.timeline();
    quitChongqing.to(".mask", {
      y: "-100vh",
      onComplete: () => {
        document.body.style.height = "auto";
        document.body.style.overflow = "auto";
        document.querySelector(".mask").remove();
        let width = window.innerWidth;
        if (width >= 375 && width <= 767.5) {
          /* 开始新的时间线动画 */
          let tl = gsap.timeline();
          tl.to(".text-list", {
            opacity: 1,
            stagger: 0.1,
            y: 0,
          });
        } else {
          quitChongqing.to(".nav", {
            opacity: 1,
            x: 0,
            duration: 0.5,
            onComplete: () => {
              /* 开始新的时间线动画 */
              let tl = gsap.timeline();
              tl.to(".text-list", {
                opacity: 1,
                stagger: 0.1,
                y: 0,
              });
            },
          });
        }
      },
    });
  });

  /* 全局动画 */
  gsap.to(".mien-l-video", {
    opacity: 1,
    duration: 0.5,
    scale: 1,
    scrollTrigger: {
      trigger: ".mien-l-video",
      start: "top 100%",
    },
  });

  const scenic_lists = gsap.utils.toArray(".scenic-list");
  scenic_lists.forEach((scenic_list) => {
    gsap.to(scenic_list, {
      y: 0,
      opacity: 1,
      duration: 1,
      scrollTrigger: {
        trigger: scenic_list,
        start: "top 100%",
      },
    });
  });

  const play_lists = gsap.utils.toArray(".play-list");
  play_lists.forEach((play_list) => {
    gsap.to(play_list, {
      y: 0,
      opacity: 1,
      duration: 1,
      scale: 1,
      scrollTrigger: {
        trigger: play_list,
        start: "top 100%",
      },
    });
  });

  /*   let bookings = gsap.utils.toArray(".booking");
  bookings.forEach((booking) => {
    booking.addEventListener("click", () => {
      console.log(gsap);
    });
  }); */

  if (window.innerWidth >= 375 && window.innerWidth <= 767.5) {
    const guide_lists = gsap.utils.toArray(".guide-list");
    guide_lists.forEach((guide_list) => {
      gsap.to(guide_list, {
        y: 0,
        opacity: 1,
        duration: 0.5,
        scrollTrigger: {
          trigger: guide_list,
          start: "top 100%",
        },
      });
    });
  } else {
    gsap.to(".guide-list", {
      y: 0,
      opacity: 1,
      duration: 0.2,
      stagger: 0.25,
      scrollTrigger: {
        trigger: ".guide-list",
        start: "top 100%",
      },
    });
  }
});
